<template>
    <div class="cinema">
        <filterNav class="fileter-nav" />
        <div v-html="shopHtml" class="shop-html"></div>
    </div>
</template>

<script setup name="Cinema">
import { onMounted, ref } from "@vue/runtime-core";
import { getCinemas } from "network/Home/index";
import moment from "moment";
import filterNav from "components/common/FilterNav/index.vue";

const shopHtml = ref("");
onMounted(async () => {
    console.log(moment().format("yyyy-M-0D"));
    const res = await getCinemas({
        day: moment().format("yyyy-M-0D"),
        offset: 0,
        limit: 20,
        lineId: -1,
        hallType: -1,
        brandId: -1,
        serviceId: -1,
        areaId: -1,
        stationId: -1,
        updateShowDay: true,
        reqId: 1625225278193,
        cityId: 57,
        optimus_uuid: "1C71FF90C90311EBB8F897AC846D405CC8911BE7E0E0490B8A99FFF8F0F4A419",
        optimus_risk_level: 71,
        optimus_code: 10,
    });
    shopHtml.value = res;
});
</script>

<style lang="less">
.cinema {
    margin-top: 40px;
    padding: 15px;
    background-color: #fff;
    .shop-html {
        padding-bottom: 34px;
    }
    .fileter-nav {
        position: fixed;
        top: 150px;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 999;
    }
    a {
        display: block;
        .item {
            background-color: #fff;
            position: relative;
            overflow: hidden;
            height: 113px;
            padding-bottom: 15px;
            border-bottom: 1px solid #e5e5e5;
            .title-block {
                height: 100%;
                .flex();
                flex-direction: column;
                justify-content: space-between;
                .title {
                    span {
                        font-size: 16px;
                        color: #000;
                    }
                    .price-block {
                        .price {
                            font-size: 18px;
                            color: #f03d37;
                        }
                        .q {
                            margin-left: 3px;
                            font-size: 12px;
                            color: #f03d37;
                        }
                    }
                }
                .location-block {
                    .flex-center-between();
                    div {
                        font-size: 13px;
                    }
                    div:first-child {
                        .text-overflow();
                        width: 285px;
                    }
                }
                .label-block {
                    .flex();
                    align-items: center;
                    font-size: 12px;
                    div {
                        border-radius: 2px;
                        padding: 0 3px;
                        margin-left: 5px;
                    }
                    div:first-child {
                        margin: 0;
                    }
                    .endorse,
                    .allowRefund,
                    .hallType {
                        border: 1px solid #589adf;
                    }
                    .vipTag,
                    .snack {
                        border: 1px solid #ff9900;
                    }
                }
                .discount-block {
                    > div:first-child {
                        .flex();
                        align-items: center;
                        .discount-label {
                            img {
                                width: 15px;
                            }
                        }
                        .discount-label-text {
                            margin-left: 5px;
                            font-size: 11px;
                        }
                    }
                }
            }
        }
    }
}
</style>
